/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();
    var xg = Ext.grid;

	// create the data store
    var reader = new Ext.data.ArrayReader({}, [
        {name: 'name',type: 'string'},
    	{name: 'function',type: 'string'},
		{name: 'phone',type: 'string'},
		{name: 'office',type: 'string'},
		{name: 'structure',type: 'string'}
    ]);
	var store = new Ext.data.GroupingStore({
		reader: reader,
		data: myData,
		sortInfo:{field: 'name', direction: "ASC"},
		groupField:'structure',

		autoload:true
	});	

	var grid = new xg.GridPanel({
        store: store,
        columns: [
			{id:'name', header: 'Nom', width: '90%', sortable: true, flex: 1, dataIndex: 'name'},
            {header: 'Fonction', width: '5%', sortable: true, dataIndex: 'function'},
			{header: 'Telephone', width: '3%', sortable: true, dataIndex: 'phone'},
            {header: 'Bureau', width: '2%', sortable: true, dataIndex: 'office'},
            {header: 'Structure', width: '10%', sortable: true, hidden: true, dataIndex: 'structure'}
        ],

        view: new xg.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
		height: 500,
        width: '100%',
        animCollapse: false
    });
	grid.render('grid-example');
});
